<template>
  <div class="config-color">
    <div class="list">
      <div class="item"
        @click="itemClick(-1)" 
        >
        <div class="img-wrapper" :class="itemIndex === -1 ? 'active' : ''"></div>
        <div class="item-title">默认: 无</div>
      </div>
      <div class="item"
        @click="itemClick(index)" 
        v-for="(item, index) in list" :key="index">
        <div class="img-wrapper" 
          :class="index === itemIndex ? 'active' : ''"
          :style="{backgroundImage: 'url(' + item.imgUrl + ')'}">
          <p 
            class="change-btn" 
            v-if="index === itemIndex">
            替换封底素材
            <input type="file" class="file" accept="image/png, image/jpeg" @change="e => fileChange(e, index)"/>
          </p>
        </div>
        <div class="item-title">{{item.materialName + index}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
        {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
         {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
         {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
         {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
         {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
         {
          imgUrl: 'http://oss.dev.shijiayun.cn/cpms/image/c562219804784dd487f5994531b08309.jpg',
          materialName: '素材包名称'
        },
      ],
      itemIndex: -1
    }
  },
  methods: {
    fileChange (e, index) {
      console.log('index: ', index)
      console.log('e:', e)
      const file = e.target.files[0]
      // TODO 这里对接图片上传接口
    },
    itemClick (index) {
      this.itemIndex = index
    }
  }
}
</script>

<style scoped>
.file {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.change-btn {
  position: absolute;
  bottom: 2.13vw;
  left: 50%;
  transform: translateX(-50%);
  width: 29.33vw;
  height: 9.6vw;
  border-radius: 4.8vw;
  text-align: center;
  line-height: 9.6vw;
  background: #0A67FF;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  color: #FFFFFF;
}
.config-color {
  padding-top: 5.33vw;
}
.list {
  margin: 0 10.13vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  box-sizing: border-box;
  margin-bottom: 3.2vw;
}
.img-wrapper {
  width: 36vw;
  height: 53.33vw;
  margin-bottom: 2.13vw;
  border-radius: 2.13vw;
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1.07vw solid #F8F8FA;
}
.active {
  border: 1.07vw solid #0A67FF;
}
.item-title {
  width: 36vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>